<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象-选项卡</title>
    <style>
        .box{display:none;
        text-align: center;
        color: white;
        font-size: 26px;
        }
        .box:nth-of-type(4){
        	width: 100px;
        	height: 100px;
        	background: red;
        }
        .box:nth-of-type(2){
        	width: 100px;
        	height: 100px;
        	background: greenyellow;
        }
        .box:nth-of-type(3){
        	width: 100px;
        	height: 100px;
        	background: yellow;
        }
        #div2{
        	width: 170px;
        }
        div{
        	margin: 100px auto;
        }
        .active{
        	background: blue;
        }
    </style>
</head>
<body>
<div id="div2">
    <input class="active" type="button" value="按钮1">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
</div>
<div class="box" style="display:block;">切换1</div>
<div class="box">切换2</div>
<div class="box">切换3</div>
</body>
</html>
<script type="text/javascript">
    window.onload = function () {
        var oTab = new TabSwitch("div2");
    }
    var aBtn = null;
    var aDiv = null;
    function TabSwitch(id){
        var div2 = document.getElementById(id);
        this.aBtn = div2.getElementsByTagName('input');//全局变量 转变成属性
        this.aDiv = document.getElementsByClassName('box');
        var _this =this;//将这里的对象this存入_this中，方便在按钮点击里面用
        for(i=0;i<this.aBtn.length;i++){
            this.aBtn[i].index = i;
            this.aBtn[i].onclick = function () {
                _this.tab(this);//这里的this指的是按钮，把它作为参数传到函数中；
            }
        }
    }
    TabSwitch.prototype.tab = function (aBtn){//函数 转变成对象的方法
//        alert(this);  //input
//        alert(this);    //这里的this指的是对象object;
        for(i=0;i<this.aBtn.length;i++){
            this.aBtn[i].className = '';
            this.aDiv[i].style.display = 'none';
        }
        aBtn.className = 'active';
        this.aDiv[aBtn.index].style.display = 'block';
    }
</script>